<div class="areas">
	<ul class="tabs">
		<li class="active"><%= link_to_function('My Matches', nil, :id => 'active') do |page|
							page.visual_effect(:fade, :ladder)
							page.visual_effect(:fade, :best_results)
							page.visual_effect(:appear, :matches)
						end
		 %></li>
		<li><%= link_to_function('My Best Results', nil, :id => 'active') do |page|
							page.visual_effect(:fade, :matches)
							page.visual_effect(:fade, :ladder)
							page.visual_effect(:appear, :best_results)
						end
		 %></li>
		 <li><%= link_to_function('Ladder', nil, :id => 'active') do |page|
 							page.visual_effect(:fade, :matches)
 							page.visual_effect(:fade, :best_results)
 							page.visual_effect(:appear, :ladder)
 						end
 		 %></li>
  </ul><br/>
	<div id="matches" class="listing">
    <h2>Add Match</h2>
      <div id="newmatch">
        <%= render :partial => 'matches/newmatchshort' %>
      </div>
    <h2>New Matches</h2>
      <div id="planned_matches">
        <% unless @planned_matches.empty? %>
        <%= render :partial => 'matches/matches', :collection => @planned_matches %>
        <% else %>
          <p>No matches planned</p>
        <% end -%>
      </div>
    <h2>History</h2>
      <div id="history">
        <% unless @history.empty? %>
        <%= render :partial => 'matches/matches', :collection => @history %>
        <% else %>
          <p>No History</p>
        <% end -%>
      </div>
  </div>

  <div id="best_results" class="listing" style="display:none">
    <h2>Best Results</h2>
    <p>The following games are the best games which you won</p>
    
    <div id="board">
      <% unless @board.empty? %>
        <%= render :partial => 'matches/board', :collection => @board %>
      <% else %>
        <p>No results found</p>
      <% end -%>
    </div>
  </div>
  
  <div id="ladder" class="listing" style="display:none">
    <h2>Squash Ladder</h2>
    
    <div id="board">
      <% unless @ladder.empty? %>
        <div class="match">
           <%= image_tag '/images/sport_raquet.png' %>
           <div id="names" class="cell">Player</div>
           <div id="wins" class="cell">Win</div>
           <div id="loss" class="cell">Lost</div>
           <div id="played" class="cell">Played</div>
           <div id="score" class="cell">Points</div>
         </div>
        <%= render :partial => 'matches/ladder', :collection => @ladder %>
      <% else %>
        <p>No results found</p>
      <% end -%>
    </div>
  </div>
</div>